<template>
  <div id="app">
    <div class="Indextop" v-if="$route.meta.search">
      <!-- <Loading></Loading> -->
      <IndexTop></IndexTop>
    </div>

    <router-view />

    <van-tabbar
      placeholder
      v-model="active"
      active-color="#000"
      inactive-color="#ACACAC"
      v-if="$route.meta.showNav"
    >
      <van-tabbar-item :to="{ path: '/home' }">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item to="/course">
        <span>课堂</span>
        <template #icon="props">
          <img :src="props.active ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item to="/market">
        <span>商城</span>
        <template #icon="props">
          <img :src="props.active ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item to="/like">
        <span>收藏夹</span>
        <template #icon="props">
          <img :src="props.active ? icon.active4 : icon.inactive4" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item to="/my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.active5 : icon.inactive5" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// import Loading from "@/components/Loading.vue";
import IndexTop from "@/components/IndexTop.vue";

export default {
  components: {
    IndexTop,
  },
  data() {
    return {
      active: 0,
      icon: {
        active1: require("./assets/tabbar/index1.png"),
        inactive1: require("./assets/tabbar/index0.png"),
        active2: require("./assets/tabbar/video1.png"),
        inactive2: require("./assets/tabbar/video0.png"),
        active3: require("./assets/tabbar/market1.png"),
        inactive3: require("./assets/tabbar/market0.png"),
        active4: require("./assets/tabbar/like1.png"),
        inactive4: require("./assets/tabbar/like0.png"),
        active5: require("./assets/tabbar/my1.png"),
        inactive5: require("./assets/tabbar/my0.png"),
      },
    };
  },
  watch: {
    $route(to) {
      if (
        to.path == "/home" ||
        to.path == "/home/attention" ||
        to.path == "/home/note" ||
        to.path == "/home/videolist"
      ) {
        this.active = 0;
      } else if (to.path == "/course") {
        this.active = 1;
      } else if (to.path == "/market") {
        this.active = 2;
      } else if (to.path == "/like") {
        this.active = 3;
      } else if (to.path == "/my") {
        this.active = 4;
      }
    },
  },
};
</script>

<style lang="less">
// #app {
// font-family: Avenir, Helvetica, Arial, sans-serif;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// text-align: center;
// color: #2c3e50;
// }

// #nav {
//   // padding: 30px;

//   a {
//     &.router-link-exact-active {
//     }
//   }
// }
.Indextop {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: #fff;
}
</style>
